<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="../js/wap_meta.js" ></script>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../js/jquery-2.1.1.js" ></script>
		<link rel="stylesheet" href="../css/base.css" />
		<script type="text/javascript" src="../js/link.js" ></script>
		<script type="text/javascript" src="../js/jquery.cookie.js" ></script>
		<script type="text/javascript" src="../js/id.js" ></script>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
			font-family: "微软雅黑";
		}
		
		body {
			background: #f0f0f0;
		}
		.title p{
			width: 750px;
			text-align: center;
			font-size: 34px;
			color: #004591;
			padding-top: 26px;
		}
		.back{
			position: absolute;
			top: 30px;
			left: 30px;
		}
		.littleTitle{
			position: absolute;
			width: 750px;
			text-align: center;
			top: 130px;
			font-size: 32px;
			color: #0b52a1;
		}
		.content{
			position: absolute;
			top: 210px;
			padding-bottom: 100px;
		}
		.bar{
			position: relative;
			height: 90px;
		}
		.bar p{
			padding-top: 15px;
			padding-left: 30px;
			font-size: 32px;
			color: #333333;
		}
		.right{
			position: absolute;
			left: 240px;
			top: 15px;
		}
		.right input{
			font-size: 32px;
			color: #999999;
			border: 0;
			background: 0;
			width: 500px;
		}
		.line{
			position: absolute;
			left: 30px;
			width: 720px;
			top: 78px;
			height: 1px;
			background: #d0d0d0;
		}
		.sanjiao{
			position: absolute;
			left: 680px;
			top: 30px;
		}
		.comform1{
			position: absolute;
			left: 30px;
			top: 1050px;
			padding-bottom: 100px;
		}
		.comform2{
			position: absolute;
			left: 30px;
			bottom: 100px;
		}
		select{
			width: 510px;
			height: 44px;
			font-size: 32px;
			color: #999999;
			border: 0;
			background: 0;
		}
		
		.selectBar{
			position: absolute;
			top: 100px;
			width: 750px;
		}
		.selection{
			float: left;
			position: relative;
			width: 375px;
			height: 80px;
		}
		.selection p{
			width: 375px;
			text-align: center;
			font-size: 32px;
			padding-top: 18px;
		}
		.blue{
			background: #0b52a1;
		}
		.selected{
			background: #fff;
		}
		.selected p{
			color: #0b52a1;
		}
		.blue p{
			color: #fff;
		}
		.right1{
			position: absolute;
			left: 240px;
			top: 15px;
			width: 500px;
		}
		.right1 div{
			float: left;
			padding-right: 60px;
			padding-top: 4px;
		}
		.right1 div input{
			font-size: 32px;
			color: #999999;
		}
		input[type="date"] {
			height: 40px;
			width: 510px;
		}
		input[type="radio"] {
			margin: 3px 3px 0px 5px;
			display: none;
			height: 360px;
			width: 360px;
		}
		label {
			font-size: 27px;
			height: 32px;
			position: relative;
			padding-left: 40px;
			/*padding-top: 8px;
			padding-bottom: 7px;*/
			cursor: pointer;
			background: url(../img/apply/select.png) no-repeat left bottom;
		}
		label.checked {
			background-position: left top;
		}
	</style>
	<body>
		<div class="title">
			<p>公益护照申领</p>
			<img class="back" src="../img/activate/back.png" />
		</div>
		<div class="selectBar">
			<div class="selection blue" id="sel1" sel="1">
				<p>监护人信息</p>
			</div>
			<div class="selection selected" id="sel2" sel="0">
				<p>监护单位信息</p>
			</div>
		</div>
		<div class="content" id="form1">
			<form id="searchForm1">
				<div class="bar">
					<div class="left">
						<p>姓名<font color='#FF3939'>*</font></p>
					</div>
					<div class="right">
						<input name="name" type="text" placeholder="请输入姓名">
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>监护人关系<font color='#FF3939'>*</font></p>
					</div>
					<img class="sanjiao" src="../img/apply/sanjiao.png" />
					<div class="right">
                        <select id="relationType">
                            <option selected value="0">父母</option>
                            <option value="1">军官证</option>
                            <option value="2">护照</option>
                        </select>
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>证件类型<font color='#FF3939'>*</font></p>
					</div>
					<img class="sanjiao" src="../img/apply/sanjiao.png" />
					<div class="right">
                        <select id="cardType">
                            <option selected value="0">身份证</option>
                            <option value="1">军官证</option>
                            <option value="2">护照</option>
                        </select>
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>证件号码<font color='#FF3939'>*</font></p>
					</div>
					<div class="right">
						<input id="card_no" name="card_no" type="text" placeholder="请输入证件号码">
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>出生日期<font color='#FF3939'>*</font></p>
					</div>
					<div class="right">
						<input name="date" placeholder="请选择出生日期" type="text" onfocus="(this.type='date')"  >
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>性别<font color='#FF3939'>*</font></p>
					</div>
				<div class="right1">
					<div>
						<input class="sexinput" type="radio" id="男" checked="checked" name="sex" value="男">
						<label name="男" class="sexs checked" for="男">男</label>
					</div>
					<div>
						<input class="sexinput" type="radio" id="女" name="sex" value="女">
						<label name="女" class="sexs" for="女">女</label>
					</div>
				</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>电话<font color='#FF3939'>*</font></p>
					</div>
					<div class="right">
						<input name="mobile" type="text" placeholder="请输入监护人手机号码">
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>未成年人请完善监护人或监护单位信息</p>
					</div>
				</div>
			</form>
		</div>
		<div class="content" id="form2">
			<form id="searchForm2">
				<div class="bar">
					<div class="left">
						<p>单位名称<font color='#FF3939'>*</font></p>
					</div>
					<div class="right">
						<input name="unit" type="text" placeholder="请输入单位名称">
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>组织机构代码<font color='#FF3939'>*</font></p>
					</div>
					<div class="right">
						<input name="code" type="text" placeholder="请输入组织机构代码">
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>未成年人请完善监护人或监护单位信息</p>
					</div>
				</div>
			</form>
		</div>
		<img id="comform" class="comform1" src="../img/activate/next.png" />
		<script>
			$("#form2").hide();
			$("#sel1").click(function(){
				if($("#sel1").attr("sel") == "0"){
					$("#sel1").attr("sel","1");
					$("#sel2").attr("sel","0");
					$("#sel1").addClass("blue");
					$("#sel1").removeClass("selected");
					$("#sel2").addClass("selected");
					$("#sel2").removeClass("blue");
					$("#form1").show();
					$("#form2").hide();
					$("#comform").addClass("comform1");
					$("#comform").removeClass("comform2");
				}
			})
			$("#sel2").click(function(){
				if($("#sel2").attr("sel") == "0"){
					$("#sel2").attr("sel","1");
					$("#sel1").attr("sel","0");
					$("#sel2").addClass("blue");
					$("#sel2").removeClass("selected");
					$("#sel1").addClass("selected");
					$("#sel1").removeClass("blue");
					$("#form2").show();
					$("#form1").hide();
					$("#comform").addClass("comform2");
					$("#comform").removeClass("comform1");
				}
			})
			$("#comform").click(function(){
				var obj = new Object();
				
				if($("#form1").css("display") == "block"){
					if($("#searchForm1 [name='name']").val() == ""){
						alert("请输入姓名");
						return;
					}
					if(!checkCard()){
						return;
					}
					if($("#searchForm1 [name='date']").val() == ""){
						alert("请选择出生日期");
						return;
					}
					if($("#searchForm1 [name='mobile']").val() == ""){
						alert("请输入监护人手机号码");
						return;
					}
					obj.guardianName = $("#searchForm1 [name='name']").val();
					obj.guardianSex = $("#searchForm1 [name='sex']").attr("id");
					obj.guardianRelation = $("#relationType").children('option:selected').val();
					obj.guardianPhone = $("#searchForm1 [name='mobile']").val();
					obj.guardianCardType = $("#cardType").children('option:selected').val();
					obj.guardianCardNo = $("#searchForm1 [name='card_no']").val();
				}
				if($("#form2").css("display") == "block"){
					if($("#searchForm2 [name='unit']").val() == ""){
						alert("请输入单位名称");
						return;
					}
					if($("#searchForm2 [name='code']").val() == ""){
						alert("请输入组织机构代码");
						return;
					}
					obj.guardianUnit = $("#searchForm2 [name='unit']").val();
					obj.guardianUnitCode = $("#searchForm2 [name='code']").val();
				}
				
				obj.step = 2;
				obj.sn = $.cookie("sn");
				
				var encoded = JSON.stringify(obj);  
			    var jsonStr = encoded;  
				
				$.ajax({
					url: linkObj.apply,
					type: "post",
			        dataType : 'json',  
					data: JSON.stringify(obj),
        			contentType: "application/json",  
					success: function(data) {
						if(data.code == 0) {
//							alert(data.message)
//							document.location = "appointment.html";
							document.location = "number.html";
						} else {
							alert(data.message)
						}
					}
				});
				
//				$.post("/gov/v1/passport/apply/2/" + $.cookie("sn"),{guardianName:obj.guardianName,guardianSex:obj.guardianSex,guardianRelation:obj.guardianRelation,guardianPhone:obj.guardianPhone,guardianCardType:obj.guardianCardType,guardianCardNo:obj.guardianCardNo,guardianUnit:obj.guardianUnit,guardianUnitCode:obj.guardianUnitCode},function(data){
//					if(data.code == 0){
////						document.location = "number.html";
//					}
//				},'json')
			})
			$(".back").click(function(){
				javascript:history.go(-1);
			})
			
//			获取监护人关系
			$.get(linkObj.relationType,function(data){
				if(data.code == 0){
					$("#relationType").empty();
					for (var ci = 0; ci < data.data.relation.length; ci++) {
						var option = $("<option>").val(data.data.relation[ci].code).text(data.data.relation[ci].name);
						$("#relationType").append(option);
					}
				}
			},'json')
//			获取证件类型
			$.get(linkObj.cardType,function(data){
				if(data.code == 0){
					$("#cardType").empty();
					for (var ci = 0; ci < data.data.length; ci++) {
						var option = $("<option>").val(data.data[ci].code).text(data.data[ci].name);
						$("#cardType").append(option);
					}
				}
			},'json')
			
			
		  $('.sexs').click(function(){
		    var radioId = $(this).attr('name');
		    $('.sexs').removeClass('checked') && $(this).addClass('checked');
		    $('.sexinput').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
		  });
		</script>
	</body>
</html>
